<template>
	<view class="custom-made">
		<view class="custom-made-content">
			<view class="custom-made-content-left">
				<view class="custom-made-content-left-title">
					<text>{{props.modaData.title}}</text>
					<text>{{props.modaData.text}}</text>
				</view>
				<view class="custom-made-content-left-button" @click="$goUrl('/subPackage/index/submitCustomized')">
					<button>{{props.modaData.buttontext}}</button>
				</view>
			</view>
			<view class="custom-made-content-right">
				<image :src="props.modaData.image" mode="aspectFill"></image>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	interface customType {
		customData : { title : string, text : string, image : string, buttontext : string }
	}

	const props = defineProps<{
		modaData : customType['customData']
	}>()
</script>

<style lang="scss" scoped>
	.flex {
		display: flex;
		align-items: center;
	}

	@function color($color) {
		@return $color;
	}

	.custom-made-content {
		margin-top: 30rpx;
		background: color(white);
		border-radius: 20rpx;
		padding: 24rpx;
		padding-left: 32rpx;
		@extend .flex;
	}

	.custom-made-content-left {

		.custom-made-content-left-title {
			@extend .flex;
			flex-direction: column;
			align-items: flex-start;

			text {
				font-family: Source Han Sans, Source Han Sans;
				font-weight: 400;
				font-size: 24rpx;
				color: #7B7B89;

				&:nth-child(1) {
					font-weight: bold;
					font-size: 36rpx;
					color: #020121;
				}

				&:nth-last-child(1) {
					margin: 24rpx 0;
				}
			}
		}

		.custom-made-content-left-button {

			button {
				margin: 0;
				padding: 0;
				width: 200rpx;
				height: 64rpx;
				background: #020121;
				border-radius: 8rpx;
				font-family: Source Han Sans, Source Han Sans;
				font-weight: 400;
				font-size: 24rpx;
				color: #FFFFFF;

				&::after {
					display: none;
				}
			}
		}
	}


	.custom-made-content-right {
		margin-left: 40rpx;

		image {
			width: 272rpx;
			height: 212rpx;
			border-radius: 20rpx;
		}
	}
</style>